<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>CSS3士兵队伍整齐的步伐模拟动画DEMO演示</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

		<link rel="stylesheet" href="css/style.css">

	</head>

	<body>

		<main>
			<div class="column">
				<div class="soldier">
					<div class="torso">
						<div class="head">
							<div class="hat"></div>
							<div class="visor"></div>
						</div>
						<div class="left-arm">
							<div class="musket">
								<div class="bayonet"></div>
								<div class="butt"></div>
							</div>
							<div class="hand"></div>
						</div>
						<div class="right-arm">
							<div class="hand"></div>
						</div>
						<div class="wind-up-handle"></div>
						<div class="left-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
						<div class="right-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="soldier">
					<div class="torso">
						<div class="head">
							<div class="hat"></div>
							<div class="visor"></div>
						</div>
						<div class="left-arm">
							<div class="musket">
								<div class="bayonet"></div>
								<div class="butt"></div>
							</div>
							<div class="hand"></div>
						</div>
						<div class="right-arm">
							<div class="hand"></div>
						</div>
						<div class="wind-up-handle"></div>
						<div class="left-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
						<div class="right-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="soldier">
					<div class="torso">
						<div class="head">
							<div class="hat"></div>
							<div class="visor"></div>
						</div>
						<div class="left-arm">
							<div class="musket">
								<div class="bayonet"></div>
								<div class="butt"></div>
							</div>
							<div class="hand"></div>
						</div>
						<div class="right-arm">
							<div class="hand"></div>
						</div>
						<div class="wind-up-handle"></div>
						<div class="left-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
						<div class="right-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="soldier">
					<div class="torso">
						<div class="head">
							<div class="hat"></div>
							<div class="visor"></div>
						</div>
						<div class="left-arm">
							<div class="musket">
								<div class="bayonet"></div>
								<div class="butt"></div>
							</div>
							<div class="hand"></div>
						</div>
						<div class="right-arm">
							<div class="hand"></div>
						</div>
						<div class="wind-up-handle"></div>
						<div class="left-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
						<div class="right-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="soldier">
					<div class="torso">
						<div class="head">
							<div class="hat"></div>
							<div class="visor"></div>
						</div>
						<div class="left-arm">
							<div class="musket">
								<div class="bayonet"></div>
								<div class="butt"></div>
							</div>
							<div class="hand"></div>
						</div>
						<div class="right-arm">
							<div class="hand"></div>
						</div>
						<div class="wind-up-handle"></div>
						<div class="left-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
						<div class="right-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="soldier">
					<div class="torso">
						<div class="head">
							<div class="hat"></div>
							<div class="visor"></div>
						</div>
						<div class="left-arm">
							<div class="musket">
								<div class="bayonet"></div>
								<div class="butt"></div>
							</div>
							<div class="hand"></div>
						</div>
						<div class="right-arm">
							<div class="hand"></div>
						</div>
						<div class="wind-up-handle"></div>
						<div class="left-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
						<div class="right-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="soldier">
					<div class="torso">
						<div class="head">
							<div class="hat"></div>
							<div class="visor"></div>
						</div>
						<div class="left-arm">
							<div class="musket">
								<div class="bayonet"></div>
								<div class="butt"></div>
							</div>
							<div class="hand"></div>
						</div>
						<div class="right-arm">
							<div class="hand"></div>
						</div>
						<div class="wind-up-handle"></div>
						<div class="left-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
						<div class="right-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="soldier">
					<div class="torso">
						<div class="head">
							<div class="hat"></div>
							<div class="visor"></div>
						</div>
						<div class="left-arm">
							<div class="musket">
								<div class="bayonet"></div>
								<div class="butt"></div>
							</div>
							<div class="hand"></div>
						</div>
						<div class="right-arm">
							<div class="hand"></div>
						</div>
						<div class="wind-up-handle"></div>
						<div class="left-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
						<div class="right-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="column">
				<div class="soldier">
					<div class="torso">
						<div class="head">
							<div class="hat"></div>
							<div class="visor"></div>
						</div>
						<div class="left-arm">
							<div class="musket">
								<div class="bayonet"></div>
								<div class="butt"></div>
							</div>
							<div class="hand"></div>
						</div>
						<div class="right-arm">
							<div class="hand"></div>
						</div>
						<div class="wind-up-handle"></div>
						<div class="left-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
						<div class="right-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="soldier">
					<div class="torso">
						<div class="head">
							<div class="hat"></div>
							<div class="visor"></div>
						</div>
						<div class="left-arm">
							<div class="musket">
								<div class="bayonet"></div>
								<div class="butt"></div>
							</div>
							<div class="hand"></div>
						</div>
						<div class="right-arm">
							<div class="hand"></div>
						</div>
						<div class="wind-up-handle"></div>
						<div class="left-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
						<div class="right-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="soldier">
					<div class="torso">
						<div class="head">
							<div class="hat"></div>
							<div class="visor"></div>
						</div>
						<div class="left-arm">
							<div class="musket">
								<div class="bayonet"></div>
								<div class="butt"></div>
							</div>
							<div class="hand"></div>
						</div>
						<div class="right-arm">
							<div class="hand"></div>
						</div>
						<div class="wind-up-handle"></div>
						<div class="left-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
						<div class="right-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="soldier">
					<div class="torso">
						<div class="head">
							<div class="hat"></div>
							<div class="visor"></div>
						</div>
						<div class="left-arm">
							<div class="musket">
								<div class="bayonet"></div>
								<div class="butt"></div>
							</div>
							<div class="hand"></div>
						</div>
						<div class="right-arm">
							<div class="hand"></div>
						</div>
						<div class="wind-up-handle"></div>
						<div class="left-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
						<div class="right-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="soldier">
					<div class="torso">
						<div class="head">
							<div class="hat"></div>
							<div class="visor"></div>
						</div>
						<div class="left-arm">
							<div class="musket">
								<div class="bayonet"></div>
								<div class="butt"></div>
							</div>
							<div class="hand"></div>
						</div>
						<div class="right-arm">
							<div class="hand"></div>
						</div>
						<div class="wind-up-handle"></div>
						<div class="left-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
						<div class="right-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="soldier">
					<div class="torso">
						<div class="head">
							<div class="hat"></div>
							<div class="visor"></div>
						</div>
						<div class="left-arm">
							<div class="musket">
								<div class="bayonet"></div>
								<div class="butt"></div>
							</div>
							<div class="hand"></div>
						</div>
						<div class="right-arm">
							<div class="hand"></div>
						</div>
						<div class="wind-up-handle"></div>
						<div class="left-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
						<div class="right-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="soldier">
					<div class="torso">
						<div class="head">
							<div class="hat"></div>
							<div class="visor"></div>
						</div>
						<div class="left-arm">
							<div class="musket">
								<div class="bayonet"></div>
								<div class="butt"></div>
							</div>
							<div class="hand"></div>
						</div>
						<div class="right-arm">
							<div class="hand"></div>
						</div>
						<div class="wind-up-handle"></div>
						<div class="left-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
						<div class="right-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="soldier">
					<div class="torso">
						<div class="head">
							<div class="hat"></div>
							<div class="visor"></div>
						</div>
						<div class="left-arm">
							<div class="musket">
								<div class="bayonet"></div>
								<div class="butt"></div>
							</div>
							<div class="hand"></div>
						</div>
						<div class="right-arm">
							<div class="hand"></div>
						</div>
						<div class="wind-up-handle"></div>
						<div class="left-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
						<div class="right-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="column">
				<div class="soldier">
					<div class="torso">
						<div class="head">
							<div class="hat"></div>
							<div class="visor"></div>
						</div>
						<div class="left-arm">
							<div class="musket">
								<div class="bayonet"></div>
								<div class="butt"></div>
							</div>
							<div class="hand"></div>
						</div>
						<div class="right-arm">
							<div class="hand"></div>
						</div>
						<div class="wind-up-handle"></div>
						<div class="left-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
						<div class="right-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="soldier">
					<div class="torso">
						<div class="head">
							<div class="hat"></div>
							<div class="visor"></div>
						</div>
						<div class="left-arm">
							<div class="musket">
								<div class="bayonet"></div>
								<div class="butt"></div>
							</div>
							<div class="hand"></div>
						</div>
						<div class="right-arm">
							<div class="hand"></div>
						</div>
						<div class="wind-up-handle"></div>
						<div class="left-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
						<div class="right-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="soldier">
					<div class="torso">
						<div class="head">
							<div class="hat"></div>
							<div class="visor"></div>
						</div>
						<div class="left-arm">
							<div class="musket">
								<div class="bayonet"></div>
								<div class="butt"></div>
							</div>
							<div class="hand"></div>
						</div>
						<div class="right-arm">
							<div class="hand"></div>
						</div>
						<div class="wind-up-handle"></div>
						<div class="left-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
						<div class="right-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="soldier">
					<div class="torso">
						<div class="head">
							<div class="hat"></div>
							<div class="visor"></div>
						</div>
						<div class="left-arm">
							<div class="musket">
								<div class="bayonet"></div>
								<div class="butt"></div>
							</div>
							<div class="hand"></div>
						</div>
						<div class="right-arm">
							<div class="hand"></div>
						</div>
						<div class="wind-up-handle"></div>
						<div class="left-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
						<div class="right-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="soldier">
					<div class="torso">
						<div class="head">
							<div class="hat"></div>
							<div class="visor"></div>
						</div>
						<div class="left-arm">
							<div class="musket">
								<div class="bayonet"></div>
								<div class="butt"></div>
							</div>
							<div class="hand"></div>
						</div>
						<div class="right-arm">
							<div class="hand"></div>
						</div>
						<div class="wind-up-handle"></div>
						<div class="left-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
						<div class="right-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="soldier">
					<div class="torso">
						<div class="head">
							<div class="hat"></div>
							<div class="visor"></div>
						</div>
						<div class="left-arm">
							<div class="musket">
								<div class="bayonet"></div>
								<div class="butt"></div>
							</div>
							<div class="hand"></div>
						</div>
						<div class="right-arm">
							<div class="hand"></div>
						</div>
						<div class="wind-up-handle"></div>
						<div class="left-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
						<div class="right-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="soldier">
					<div class="torso">
						<div class="head">
							<div class="hat"></div>
							<div class="visor"></div>
						</div>
						<div class="left-arm">
							<div class="musket">
								<div class="bayonet"></div>
								<div class="butt"></div>
							</div>
							<div class="hand"></div>
						</div>
						<div class="right-arm">
							<div class="hand"></div>
						</div>
						<div class="wind-up-handle"></div>
						<div class="left-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
						<div class="right-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="soldier">
					<div class="torso">
						<div class="head">
							<div class="hat"></div>
							<div class="visor"></div>
						</div>
						<div class="left-arm">
							<div class="musket">
								<div class="bayonet"></div>
								<div class="butt"></div>
							</div>
							<div class="hand"></div>
						</div>
						<div class="right-arm">
							<div class="hand"></div>
						</div>
						<div class="wind-up-handle"></div>
						<div class="left-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
						<div class="right-leg">
							<div class="ankle">
								<div class="foot"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</main>

	</body>

</html>